<template>
	<view>
		<view class="box">
			<view class="swiper-box">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration" circular="true">
					<swiper-item v-for="(item,index) in imgarr" :key="index">
						<view class="swiper-item uni-bg-red">
							<image :src="'../../../../static/image/goods/'+item" mode="scaleToFill"
								@click="clickImg(item,index)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods-box">
				<view class="goods-info">
					<view class="price">
						<view class="tei">特惠价</view>
						<view class="preferential-price"><text class="scale">￥</text>22.80</view>
						<view class="chu">处方药</view>
					</view>
					<view class="myicon">
						<text class="demofont" @click="change">&#xe6d1;</text>
						<text class="demofont" v-if="!showIcon" @click="showicon()">&#xeb26;</text>
						<text class="demofont" v-if="showIcon" style="color: #C51A15;"
							@click="showicon()">&#xe60d;</text>
					</view>
					<view class="paice-yuan">
						<view class="j">原价:</view>
						<view><text>￥</text>{{goodsInfo.price}}</view>
					</view>
				</view>
				<view class="goods-name">{{goodsInfo.name}}</view>
				<text
					class="goods-introduce">清瘟解毒，宣肺泄热。用于治疗流行性感冒属热毒袭肺证，症见：发热或高热，恶寒，肌肉酸痛，鼻塞流涕，咳嗽，头痛发热或高热，恶寒，肌肉酸痛，鼻塞流涕，咳嗽，头痛</text>
			</view>
			<view class="goods-text">
				<view class="goods-text-item">
					<view class="goods-text-label">批准文号</view>
					<view class="goods-text-conten">{{goodsInfo.cj}}</view>
				</view>
				<view class="goods-text-item">
					<view class="goods-text-label">生产厂家</view>
					<view class="goods-text-conten">{{goodsInfo.cj}}</view>
				</view>
				<view class="goods-text-item">
					<view class="goods-text-label">规格</view>
					<view class="goods-text-conten">{{goodsInfo.gg}}</view>
				</view>
				<view class="goods-text-item">
					<view class="goods-text-label">单位</view>
					<view class="goods-text-conten">盒</view>
				</view>
			</view>
			<view class="goods-detalis">
				<view class="goods-detalis-title">
					<text class="demofont myicon">&#xe6e3;</text>
					<text>药品详情</text>
				</view>
				<view class="detali-img">
					<image src="../../../../static/image/goods/detalis1.png" mode="aspectFill"></image>
					<image src="../../../../static/image/goods/detalis2.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="goods-detalis">
				<view class="goods-detalis-title">
					<text class="demofont myicon">&#xe6e3;</text>
					<text>药品说明书</text>
				</view>
				<view class="detali-img">
					<image src="../../../../static/image/goods/instructions.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="goods-detalis">
				<view class="goods-detalis-title">
					<text class="demofont myicon">&#xe6e3;</text>
					<text>服务说明</text>
				</view>
				<text class="goods-detalis-text">1、温馨提示：图片为实物拍摄，可能会出现新旧包装更换，包装不影响药物质量，请以收到实物为准。</text>
				<text class="goods-detalis-text">2、退货政策：除药品质量原因外，药品一经售出，不得退换。药品不支持7天无理由退换。</text>
				<text class="goods-detalis-text">3、为了保证您的用药安全，若发现实物与订单不符，请与客服联系。</text>
			</view>
		</view>
		<view class="shopping-box">
			<view class="shopping-left">
				<view class="left-icon" @click="kefu">
					<text class="demofont">&#xe603;</text>
					<text class="text">客服</text>
				</view>
				<view class="left-icon">
					<text class="demofont">&#xe664;<view class="badge">3</view></text>
					<text class="text">购物车</text>
				</view>
			</view>
			<view class="shopping-right">
				<view class="btn-box">
					<view class="car view" @click="open()">加入购物车</view>
					<view class="make view">立即预约</view>
				</view>
			</view>
		</view>
		<unipopup ref="popup"></unipopup>
		<mypopup ref="mypopup"></mypopup>
	</view>
</template>

<script>
	import unipopup from "../../../../components/uni-popup/uni-popup.vue"
	import mypopup from  "@/components/mypopup/mypopup.vue"
	export default {
		components: {
			unipopup,
			mypopup
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				url: "../../../../static/image/goods/",
				imgarr: ["1.png", "2.png", "3.png", "4.png", "5.png"],
				showIcon: false,
				popupShow: false,
				goodsInfo:{
					name:"连花清瘟胶囊",
					price:"32.00",
					gg:"0.35gx36粒",
					num:'1',
					cj:"石家庄以岭药业股份有限公司"
				},
				info:{
					name:"阿莫西林克拉维酸钾",
					price:"22.40",
					gg:"0.5gx10片x2板/盒",
					num:"1",
					cj:"云南白药药业有限公司"
				}
			}
		},
		onLoad(){
			this.change()
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			open() {
				this.$refs.mypopup.openshow()
				// this.$refs.popup.open("bottom")
			},
			change(){
				var init = JSON.parse(localStorage.getItem('goods'))
				if(init){
					this.goodsInfo = init
				}else{
					console.log("没得数据")
				}
				
			},
			kefu(){
				localStorage.setItem("goods",JSON.stringify(this.info))
			},
			showicon() {
				this.showIcon = !this.showIcon
			},
			clickImg(index) {
				var this_ = this
				var imgsArray = []
				for (var i = 0; i < this.imgarr.length; i++) {
					// console.log(this.imgarr[i])
					if (this.imgarr[i] !== "") {
						imgsArray.push(this.url + this.imgarr[i])
						// console.log(imgsArray)
					}
				}
				uni.previewImage({
					current: index - 1,
					urls: imgsArray,
					indicator: 'number',
					loop: true
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $default-back;
	}

	.swiper {
		height: 400upx;
	}

	.swiper-item image {
		width: 100%;
	}

	.box {
		padding-bottom: 130upx;
	}

	.goods-box {
		padding: 0 20upx;
		background-color: #fff;

		.goods-info {
			padding-top: 20upx;
			position: relative;

			.price {
				display: flex;
				align-items: center;
				font-size: 25upx;

				.tei {
					background: red;
					color: #fff;
					border-radius: 20upx 0 20upx 0;
					transform: scale(0.8);
					transform-origin: center;
					padding: 0 10upx;
				}

				.preferential-price {
					margin-left: 10upx;
					color: rgb(255, 62, 62);
					font-size: 38upx;
					font-weight: 600;

					.scale {
						font-size: 20upx;
						transform: scale(0.75);
					}
				}

				.chu {
					margin-left: 20upx;
					border-radius: 10upx;
					background-color: rgb(51, 150, 253);
					color: #fff;
					transform: scale(0.8);
					transform-origin: center;
					padding: 0 10upx;
				}
			}

			.myicon text:active {
				background-color: #eee;
			}

			.myicon {
				position: absolute;
				top: 50upx;
				right: 20upx;
				transform: translateY(-50%);
				margin-top: 5upx;

				text {
					font-size: 35upx;
					font-weight: 600;
					margin: 0 20upx;
					color: rgb(115, 115, 115);
				}
			}

			.paice-yuan {
				display: flex;
				align-items: center;
				font-size: 25upx;
				color: rgb(149, 149, 149);
				transform: scale(0.75);
				transform-origin: left;

				.j {
					width: 170upx;
					padding-left: 10upx;
				}
			}
		}

		.goods-name {
			font-size: 28upx;
			font-weight: 600;
		}

		.goods-introduce {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			font-size: 25upx;
		}
	}

	.goods-text {
		margin-top: 20upx;
		padding: 0 20upx;
		background-color: #fff;

		.goods-text-item {
			display: flex;
			height: 45upx;
			font-size: 20upx;
			transform: scale(0.75);
			transform-origin: left;

			.goods-text-label {
				width: 150upx;
				flex: 0 0 0 120upx;
				font-weight: 600;
				text-align: justify;

				&::after {
					content: "";
					display: inline-block;
					width: 100%;
				}
			}

			.goods-text-conten {
				margin-left: 30upx;
			}
		}

	}

	.goods-detalis {
		margin-top: 20upx;
		padding: 0 20upx;
		background-color: #fff;

		.goods-detalis-title {
			display: flex;
			font-size: 25upx;
			align-items: center;

			.myicon {
				font-size: 40upx;
				color: rgb(51, 150, 253);
			}
		}

		.detali-img {
			image {
				width: 100%;
				height: 900upx;
			}
		}

		.goods-detalis-text {
			font-size: 20upx;
			color: rgba(144, 147, 151, 1);
			display: inline-block;
		}
	}

	.shopping-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		align-items: center;
		height: 120upx;

		.shopping-left {
			flex: 0.6;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;

			.left-icon:active {
				background-color: #eee;
			}

			.left-icon {
				width: 50%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				color: rgb(61, 131, 238);

				.demofont {
					font-size: 34upx;
					position: relative;

					.badge {
						position: absolute;
						top: 0;
						right: -20upx;
						width: 30upx;
						height: 30upx;
						border-radius: 50%;
						background: red;
						color: #fff;
						font-size: 20upx;
						text-align: center;
						line-height: 30upx;
					}
				}

				.text {
					display: inline-block;
					width: 100%;
					text-align: center;
					line-height: 1;
					font-size: 25upx;
				}

			}
		}

		.shopping-right {
			flex: 1;

			.btn-box {
				display: flex;
				justify-content: center;
				border-radius: 20upx;
				color: #fff;
				padding: 0 40upx;

				.view {
					width: 50%;
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 25upx;
					font-weight: 600;
					letter-spacing: 2upx;
				}

				.car {
					background-color: rgb(238, 182, 57);
					border-radius: 20upx 0 0 20upx;
				}

				.make {
					background-color: rgb(255, 62, 62);
					border-radius: 0 20upx 20upx 0;
				}
			}
		}
	}
</style>
